/* 此css文件中放置各种模块化的布局信息 */
/* 即公共模块信息 多个网页同时有的都可以写在这里面 */
/* 版心 */
.w {
    width: 1200px;
    margin: auto;
}
/* 左右浮动 */
.fl{
    float:left;
}
.fr
{
    float: right;
}

/* 快速导航 */
.shortcut{
    height: 31px;
    background-color: #f1f1f1;
    font-size :12px;
    color: #666666;
}


.shortcut ul li{
    float: left;
    height: 31px;
    line-height: 31px;
    /* line-height确保块级元素的内部行内元素垂直居中有重要作用 */
}
.shortcut li a{
    margin-right: 15px;
}
/* 左 */
.shortcut .fl ul li:last-child a:nth-child(2) {
    color: #c81623;
}
/* 写nth-child和nth-of-child都必须把最终要选的类给写上去 */
.shortcut .fl ul li:last-child a:nth-child(2):hover{
    color: orangered;
}
/* 右 */
.shortcut .fr ul li a{
    border-right: 2px #999999 solid;
    font-family: 'icomoon';
   padding: 0 10px;
   margin-right: 0;
}

/* header模块制作 begin*/
.header {
    height: 106px;
}
 .logo, .search, .shopcar
{
    height: 55px;
    margin: 25.5px 0;
}

 .logo{
    width: 220px;
    float: left;
}
 .logo h1{
    width: 100%;
    height: 100%;
}
.logo a{
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/icons.png) no-repeat -372px -13px;
   /* 精灵图使用时，先x后y */
}

 .search{
    float: left;
    width: 540px;
    margin-left: 128px;
    position: relative;
}
 .search ul{
    position: absolute;
    top: 43px;
    margin-bottom: 0px;
    height: 12px;
}
  .search ul li{
    float: left;
    padding: 0 13px;
    font-size: 12px;
}
 .search input[type="search"]{
    float: left;
    width: 458px;
    height: 35px;
    border: #c81623 solid 2px;
    border-radius: 0;
    padding-left: 12px;
}
 .search input[type="button"]{
    float: left;
    width: 82px;
    height: 35px;
    background-color: #c81623;
    font-size: 16px;
    color: #f1f1f1;
    border: none;
    border-radius: 0px;
    cursor: pointer;
}
 .search input[type="button"]:hover{
    background-color: #ac1721;
}

/* 购物车 */
 .shopcar{
    position: relative;
    float: right;
    height: 36px;
    width: 142px;
    background-color: #f7f7f7;
    padding-top:  8px ;
    text-align: center;
    border: #f2f2f2 solid 2px;
}
 .shopcar a{
    font-size: 12px;
}

.shopcar::before{
    content: ''; 
    display: inline-block;
    height: 16px;
    width: 20px;
    background: url(../images/icons.png) -414px -90px no-repeat;
    vertical-align: middle;
    margin-right:8px;
}
.shopcar::after{
    content: '';
    display: inline-block;
    font-family: 'icomoon';
    margin-left: 16px;
    vertical-align: middle;
    color: #666666;
}
/* .shopcar span:first-child{
    width: 20px;
    margin: 10px 0 10px 18px;
    background: url(../images/icons.png) -414px -90px no-repeat;
    vertical-align: middle;
}
 .shopcar span:last-child{
    width: fit-content;
    margin: 10px 0px 10px 6px;
    font-family: 'icomoon';
    line-height: 12px;
} 
这是另一种写法
*/
.shopcar a:hover{
    color: #666666;
}
 .count{
    position: absolute;
    line-height: 14px;
    top: -5px;
    /* 坐起最终的动态效果更正常 */
    left: 105px;
    /* 宽度千万不要写死 ，给padding值挤开*/
    padding: 0 5px;
    height: 14px;
    background-color: orangered;
    color: #f1f1f1;
    border-radius: 7px;
    border-bottom-left-radius: 0;
}

/* 导航模块制作 begin*/
.nav{
    /* 上下多个模块，上一个模块的某个子元素可能越界了，然后就会把下面模块的某个元素给挤走 */
    /* 所以上下模块，最好有点距离 */
    /* margin可能会把下面的某些元素挤走 */
    /* 为了不影响下面的元素，要么用padding搞大盒子，要么搞小盒子，用margin但要十分精准 */
    height: 47px; 
    border-bottom: 2px solid #b1191a;
}
 .dropdown{
    float: left;
    height: 45px;
    width: 209px;
    margin-right: 11px;
    cursor: pointer;
    z-index: 3;
}
.dropdown .dt{
    height: 100%;
    width: 100%;
    line-height: 45px;
    text-align: center;
    background-color: #b1191a;
    color: #f1f1f1;
    font-size: 16px;
}
.dropdown:hover .dd{
   display: block; 
}
.dropdown .dd{
    /* 设置定位可以确保出现元素重合时，不会出现交叉覆盖的现象 */
    position: relative;
    /* display: none;  */
    height:469px;
    width: 100%;
    background-color: #c81623;
    font-size: 14px;
}
.dropdown .dd ul{
    width: 100%;
    height: 100%;
}
.dropdown .dd li{
    margin-left: 2px;
    /* 这样好看一些 */
    position: relative;
    height: 31.3px;
    width: 100%;
    padding: 9px;
    /* 注意给加有a的li放line-height */
    /* 内部有行内元素，尽量就搞这一出 */
    line-height: 14px;
}
.dropdown .dd li a{
    display: inline-block;
    color: #ffffff;
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.dropdown .dd li::after{
    top: 10px;
    right: 10px;
    position: absolute;
    content: '';
    color: #f1f1f1;
    height: 100%;
    line-height: 16px;
    font-family: 'icomoon';
    font-size: 14px;
}
.dropdown .dd li:hover{
    background-color: #f1f1f1;
}
.dropdown .dd li:hover a{
    color: orangered;
}
.dropdown .dd li:hover::after{
    color: orangered;
}
 .navitems{
     float: left;
    height: 45px;
    width: fit-content;
    font-size: 16px;
    color: #333333;
    margin-left: 5px;
}
.navitems ul li {
    float: left;
    line-height: 45px;
    /* 一定注意给li加line-height */
    
}
.navitems ul li a{
    padding: 0 25px;
    /* padding给a不给li，增大识别距离，优化用户体验 */
}
/* 导航模块制作 end*/
/* header模块制作 end*/



/* footer模块制作 start */
.footer{
    height: 420px;
    background: #f5f5f5;
}
/* mod_services */
.mod_services{
    height: 110px;
    border-bottom: 2px solid #f2f2f2;
}
.mod_services ul li {
    float: left;
    width: 181px;
    height: 50px;
    margin: 30px 25px;
}
.mod_services ul li i{
    float: left;
    height: 50px;
    width: 50px;
}
.mod_services ul li:nth-child(1) i
{
    background:  url(../images/icons.png) -252.8px -3px;
}
.mod_services ul li:nth-child(2) i
{
    background: url(../images/icons.png) -255px -53.8px;
}
.mod_services ul li:nth-child(3) i
{
    background: url(../images/icons.png) -256.9px -105.6px;
}
.mod_services ul li:nth-child(4) i
{
    background: url(../images/icons.png) -257.9px -156.8px;
}
.mod_services ul li:nth-child(5) i
{
    background: url(../images/icons.png) -257.4px -209.1px;
}
.mod_services ul li a dl{
    float: left;
    padding-left: 0px;
}
.mod_services ul li a dl dt{
    font-size: 14px;
    font-weight: 700;
    width: 108px;
}
.mod_services ul li a dl dd{
    margin-top: 5px;
    font-size: 14px;
}
/* mod_help */
.mod_help{
    height: 208px;
    border-bottom: 2px solid #f2f2f2;
}
.mod_help ul{
    margin-top: 20px;
}
.mod_help ul li{
    float: left;
    width: 200px;
    padding: 0 50px;
    /* 如果一行有多个元素，且难以精确测量值，最好选用按数目均分宽度，配合padding一并达成效果 */
}
.mod_help ul li dt{
    font-size: 14px;
    font-weight: 700;
    color: #333333;
}
.mod_help ul li dd{
    margin-top: 5px;
}
.mod_help ul li:last-child dt{
text-align: center;
}
.mod_help ul li:last-child dd
{
    text-align: center;
}
/*mod_copyright  */
.mod_copyright{
    margin-top: 10px;
    height: 65px;
}

.mod_copyright ul{
    height: 14px;
}
.mod_copyright ul li{
    float: left;
    height: 14px;
    line-height: 14px;
    padding: 0 16px;
    border-right: solid 2px  #999999;;
}
.mod_copyright ul li:last-child{
    border: 0;
}
.mod_copyright .footer_address, .mod_copyright .footer_rec
{
    line-height: 14px;
    text-align: center;
    margin-top: 13px;
    color: #666;
}
/* footer模块制作 end */